<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>jpCalendar Demo</title>
        <meta charset="UTF-8">
       <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
        <link type="text/css" href="css/newcss.css" rel="stylesheet"/>
        <script type="text/javascript" src="js/jpcalendar.js"></script>
       
    </head>
    <body>
        <div>
            <h1>jpCalendar Demo</h1>
            <p>
                <b>1.</b>The jpCalendar is tied to a standard form input field and base on jQuery. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), If a date is chosen, feedback is shown as the input's value.  
             
            </p>
            <p>
                Date:<input type="text" id="jpcalender" />
                <script type="text/javascript">
                    $(document).ready(function(){
                        $("#jpcalender").jpCalendar();
                    });
                </script>
            </p>
            
            <span>view source</span>
           
            <pre>
                 Date: &lt;input type="text" id="jpcalender" /&gt; 

               &lt;script type="text/javascript"&gt;

                    $(document).ready(function(){

                        $("#jpcalender").jpCalendar();

                    });

                &lt;/script&gt;
     
            
            </pre>
            
            
              <p>
                <b>2.</b>Use different animations when opening or closing the jpCalendar.
                 then click on the input to see its effect.
                 You can use one of the three standard animations or any of the UI Effects.<br/>
                 Year and Month Switch Effects:{"slide","move","fade","shake","none"}
                 date switch effects:{'slide','shake','fade','scale'}
            </p>
            <p>
                Date:<input type="text" id="jpcalender2" />
                <script type="text/javascript">
                    $(document).ready(function(){
                        $("#jpcalender2").jpCalendar({
                            yearEffect:"move",
                            monthEffect:"move",
                            calEffect:'slide',
                        });
                    });
                </script>
            </p>
            
            <span>view source</span>
           
            <pre>
                 Date: &lt;input type="text" id="jpcalender2" /&gt; 

               &lt;script type="text/javascript"&gt;

                    $(document).ready(function(){

                        $("#jpcalender2").jpCalendar({

                            yearEffect:"move",//or "slide","move","fade","shake","none"

                            monthEffect:"move",//or "slide","move","fade","shake","none"

                            calEffect:'slide'//or "slide","scale","fade","shake"
                        });

                    });

                &lt;/script&gt;
     
            
            </pre>
            
            
            
             <p>
                <b>3.</b>
                You can change the year or month or change only month.<br/>
                when you only change month,can set changeYearMonth=false
                
            </p>
            <p>
                Date:<input type="text" id="jpcalender3" />
                <script type="text/javascript">
                    $(document).ready(function(){
                        $("#jpcalender3").jpCalendar({
                            yearEffect:"shake",
                            monthEffect:"shake",
                            changeYearMonth:false
                        });
                    });
                </script>
            </p>
            
            <span>view source</span>
           
            <pre>
                 Date: &lt;input type="text" id="jpcalender3" /&gt; 

               &lt;script type="text/javascript"&gt;

                    $(document).ready(function(){

                        $("#jpcalender3").jpCalendar({

                            yearEffect:"shake",//or "slide","move","fade","shake","none"

                            monthEffect:"shake",//or "slide","move","fade","shake","none"

                            changeYearMonth:false
                        });

                    });

                &lt;/script&gt;
     
            
            </pre>
            
            
            
            
            
              <p>
                <b>4.</b>
                You can control whether to display the current time.<br/>
                If you are not the reality of time,you can set isShowTime:false
                
            </p>
            <p>
                Date:<input type="text" id="jpcalender4" />
                <script type="text/javascript">
                    $(document).ready(function(){
                        $("#jpcalender4").jpCalendar({
                            yearEffect:"shake",
                            monthEffect:"shake",
                            isShowTime:false
                        });
                    });
                </script>
            </p>
            
            <span>view source</span>
           
            <pre>
                 Date: &lt;input type="text" id="jpcalender4" /&gt; 

               &lt;script type="text/javascript"&gt;

                    $(document).ready(function(){

                        $("#jpcalender4").jpCalendar({

                            yearEffect:"shake",//or "slide","move","fade","shake","none"

                            monthEffect:"shake",//or "slide","move","fade","shake","none"

                            isShowTime:false
                        });

                    });

                &lt;/script&gt;
     
            
            </pre>
            
            
                 <p>
                <b>5.</b>
                Displays the month and week 2 formats<br/>
                An abbreviation, a full write,you can set jpIsFullMonth,jpIsFullWeek.<br/>
                You can also set the width of the control
            </p>
            <p>
                Date:<input type="text" id="jpcalender5" />
                <script type="text/javascript">
                    $(document).ready(function(){
                        $("#jpcalender5").jpCalendar({
                            yearEffect:"shake",
                            monthEffect:"shake",
                            isShowTime:false,
                            jpIsFullMonth:true,
                            jpIsFullWeek:true,
                            width:400
                        });
                    });
                </script>
            </p>
            
            <span>view source</span>
           
            <pre>
                 Date: &lt;input type="text" id="jpcalender5" /&gt; 

               &lt;script type="text/javascript"&gt;

                    $(document).ready(function(){

                        $("#jpcalender5").jpCalendar({

                            yearEffect:"shake",//or "slide","move","fade","shake","none"

                            monthEffect:"shake",//or "slide","move","fade","shake","none"

                            isShowTime:false,

                            jpIsFullMonth:true,// or false

                            jpIsFullWeek:true, //or false

                            width:400
                        });

                    });

                &lt;/script&gt;
     
            
            </pre>
            
            
            
            
            <p>
                <b>6.</b>
               You can set the date display position control<br/>
                position{"top","left","bottom","right"}<br/>
                Only when the set position can be put down the date controls, it can display properly, otherwise it will choose display mode
            </p>
            <p>
                Date:<input type="text" id="jpcalender6" />
                <script type="text/javascript">
                    $(document).ready(function(){
                        $("#jpcalender6").jpCalendar({
                            yearEffect:"shake",
                            monthEffect:"shake",
                            isShowTime:false,
                            position:"right"
                        });
                    });
                </script>
            </p>
            
            <span>view source</span>
           
            <pre>
                 Date: &lt;input type="text" id="jpcalender6" /&gt; 

               &lt;script type="text/javascript"&gt;

                    $(document).ready(function(){

                        $("#jpcalender6").jpCalendar({

                            yearEffect:"shake",//or "slide","move","fade","shake","none"

                            monthEffect:"shake",//or "slide","move","fade","shake","none"

                            isShowTime:false,

                            position:"right" //or "top","bottom","left"

                    
                        });

                    });

                &lt;/script&gt;
     
            
            </pre>
            
            
            
            
            <p>
                <b>7.</b>
                The theme and language<br/>
                theme{"default","black","gray","yellow","violet","red"}.<br/>The theme can not set,You can manually add the CSS file,&lt;link href="css/jpcalendar.css" rel="stylesheet" type="text/css"/&gt;<br/>
                language{"cn","en"}
            </p>
            <p>
                Date:<input type="text" id="jpcalender7" />
                <script type="text/javascript">
                    $(document).ready(function(){
                        $("#jpcalender7").jpCalendar({
                            yearEffect:"shake",
                            monthEffect:"shake",
                            isShowTime:false,
                            theme:"default",
                            lang:"cn"
                        });
                    });
                </script>
            </p>
            
            <span>view source</span>
           
            <pre>
                 Date: &lt;input type="text" id="jpcalender7" /&gt; 

               &lt;script type="text/javascript"&gt;

                    $(document).ready(function(){

                        $("#jpcalender7").jpCalendar({

                            yearEffect:"shake",//or "slide","move","fade","shake","none"

                            monthEffect:"shake",//or "slide","move","fade","shake","none"

                            isShowTime:false,

                            theme:"default", //or {"default","violet","black","gray","yellow","red"}

                            lang:"cn"
                        });

                    });

                &lt;/script&gt;
     
            
            </pre>
            
            
            
             <p>
                <b>8.</b>
                The output format of time<br/>
                The date output format：<br/>yyyy-MM-dd hh:mm:ss,<br/>
                yyyy-MM-dd hh:mm:ss.S<br/>
                yyyy-M-d h:m:s.S<br/>
                yyyy/MM/dd hh:mm:ss<br/>
                yyyy for the year<br/>
                MM for the Month<br/>
                dd for the date<br/>
                hh for the Hours<br/>
                mm for the Minute<br/>
                ss for the Seconds<br/>
                S for the Millisecond<br/>
                q for the Quarter<br/>
                
            </p>
            <p>
                Date:<input type="text" id="jpcalender8" />
                <script type="text/javascript">
                    $(document).ready(function(){
                        $("#jpcalender8").jpCalendar({
                            yearEffect:"shake",
                            monthEffect:"shake",
                            isShowTime:false,
                            Format:"yyyy-MM-dd hh:mm:ss"
                            
                            
                        });
                    });
                </script>
            </p>
            
            <span>view source</span>
           
            <pre>
                 Date: &lt;input type="text" id="jpcalender8" /&gt; 

               &lt;script type="text/javascript"&gt;

                    $(document).ready(function(){

                        $("#jpcalender8").jpCalendar({

                            yearEffect:"shake",//or "slide","move","fade","shake","none"

                            monthEffect:"shake",//or "slide","move","fade","shake","none"

                            isShowTime:false,

                            Format:"yyyy-MM-dd hh:mm:ss"
                        });

                    });

                &lt;/script&gt;
     
            
            </pre>
            
            
            
        </div>
       
    </body>
</html>
